<template>
	<view class="class-frame">
		<scroll-view scroll-x="true" class="scroll-container">
			<view class="top-frame">
				<view class="top-item" v-for="(item, index) in topItem" :key="index" @click="handleToClass(item,index)">
					<div class="icon-frame">
						<image class="icon" src="../../../static/icon/icon_1.png" mode="widthFix"></image>
					</div>
					<view>{{ item.classifyName }}</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottom-frame">
			<view class="bottom-item" v-for="(item, index) in bottomitem" :key="index" @click="handleTo(item.path)">
				<div class="icon-frame">
					<image class="icon" :src="item.icon" mode="widthFix"></image>
				</div>
				<view>{{ item.text }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		$post
	} from '@/utils/request';
	export default {
		props: {
			frameData: {
				type: Object,
				require: true
			}
		},
		data() {
			return {
				topItem: [],
				bottomitem: [{
						icon: require('../../../static/icon/icon_7.png'),
						text: '玉石文化',
						path: 'pages/culture/culture'
					},
					{
						icon: require('../../../static/icon/icon_8.png'),
						text: '二手展区'
					},
					{
						icon: require('../../../static/icon/icon_9.png'),
						text: '收藏溯源',
						path: 'pages/Traceability/Traceability'
					},
					{
						icon: require('../../../static/icon/icon_10.png'),
						text: '作品鉴定'
					},
				],
			}
		},
		mounted() {
			//请求珠宝一级分类
			$post('/system/classify/allList', {
				parentId: 0
			}).then(res => {
				this.topItem = res.data
				uni.setStorageSync('oneClassification',this.topItem) //存入一级分类
				
				
				// console.log(this.topItem);
			})
		},

		methods: {
			handleTo(item) {
				uni.navigateTo({
					url: `/${item}`
				})
			},
			handleToClass(item, index) {
				// 当前选中的item值和下标
				uni.setStorageSync('selectedData', {
					item: item,
					index: index
				});
				uni.switchTab({
					url: `/pages/class/class`
				});
				
				
			}

		}
	}
</script>

<style lang="scss" scoped>
	.class-frame {
		padding: 30rpx;
		background-color: #fff;
		transform: translateY(-30rpx);
		border-radius: 20px 20px 0 0;
		overflow: hidden;
		font-size: 13px;


		.scroll-container {
			white-space: nowrap;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch; // iOS 滚动更流畅
			padding: 20rpx 0;

			.top-frame {
				display: inline-flex;
				flex-direction: row;
				align-items: center;

				.top-item {
					height: 166rpx;
					width: 87rpx;
					background-color: #f6f6f8;
					border-radius: 999rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					margin-right: 20rpx;
					box-sizing: border-box;

					&:last-child {
						margin-right: 0;
					}

					.icon-frame {
						height: 50%;
						width: 100%;
						display: flex;
						justify-content: center;
						align-items: center;

						.icon {
							width: 80%;
						}
					}
				}
			}
		}

		.bottom-frame {
			width: 100%;
			display: flex;
			justify-content: center;
			padding-top: 30rpx;

			.bottom-item {
				color: #ca9b49;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.icon-frame {
					width: 30%;

					.icon {
						width: 100%;
					}
				}
			}
		}
	}
</style>